<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { get, post } from '@/utils/service'
import { VUE_APP_BASE_API } from '@/utils/baseConfig'
import { showDialog, showConfirmDialog, showNotify } from 'vant'
const queryNum = ref(0)
const paramValue = ref('')
const router = useRoute()
const routers = useRouter()
const memberId = (router.query.memberId as string) || -1
const customerId = ref(-1)
const showSignDialog = ref(false)
const hasCustomerStatus = ref(false)
const searchStatus = ref(false)
const member = ref({})
const customer = ref({})
const customerLists = ref([])
const noEmpty = ref(true)

queryCarMasterAuth()
function onClickLeft() {
  window.history.back()
}
function queryCarMasterAuth() {
  queryNum.value++
  get('/memberWechatNew/queryCarMasterAuth', {
    memberId: memberId,
    paramValue: paramValue.value,
  }).then((res) => {
    if (res.code == 0) {
      member.value = res.data.member
      customerLists.value = []
      const customers = res.data.customers
      if (customers != null && customers != undefined && customers.length == 1) {
        customer.value = customers[0]
        hasCustomerStatus.value = true
        customerId.value = customers[0].dbid
      }
      customerLists.value = res.data.customers
      if (customers != null && customers != undefined && customers.length > 0) {
        noEmpty.value = false
      }
      if (queryNum.value == 1) {
        paramValue.value = member.value.mobilePhone
      }
    } else {
      showDialog({
        message: res.msg + ',点击确定返回页面',
      }).then(() => {
        window.history.back()
      })
    }
  })
}
function saveCarMasterAuth() {
  const carMasterStatus = member.value.carMasterStatus
  if (null != carMasterStatus && carMasterStatus == 2) {
    showNotify({ type: 'warning', message: '会员已经认证，请勿重复操作！' })
    return
  }
  showConfirmDialog({
    title: '车主认证确认',
    message:
      '确定将' +
      customer.value.name +
      ',车架号：' +
      customer.value.vinCode +
      ',绑定为“' +
      member.value.name +
      '”的车主吗',
  })
    .then(() => {
      const memberInfo = {}
      memberInfo.vinCod = customer.value.vinCode
      memberInfo.memberId = member.value.dbid
      memberInfo.car = customer.value.carModelStr
      memberInfo.name = customer.value.name
      memberInfo.mobilePhone = customer.value.mobilePhone
      memberInfo.customerId = customer.value.dbid
      hasCustomerStatus.value = false
      post('/memberWechatNew/saveCarMasterAuth', memberInfo).then((res) => {
        if (res.code == 0) {
          showNotify({ type: 'success', message: '操作成功' })
          setTimeout(() => {
            routers.push('/myChildreen')
          }, 2000)
        } else {
          hasCustomerStatus.value = true
          showNotify({ type: 'warning', message: '操作失败！' })
        }
      })
    })
    .catch(() => {
      console.log('取消')
    })
}
function onSearch(ov: string) {
  paramValue.value = ov
  if (ov != '') {
    searchStatus.value = true
  } else {
    searchStatus.value = false
  }
  initPage()
  queryCarMasterAuth()
}
function initPage() {
  customerLists.value = []
  noEmpty.value = false
}
function selectCustomerDialog() {
  showSignDialog.value = true
}
function onClickButton() {
  if (searchStatus.value == false) {
    return
  }
  initPage()
  queryCarMasterAuth()
}
function closeSelectDialog() {
  showSignDialog.value = false
  customerId.value = -1
  hasCustomerStatus.value = false
  customer.value = {}
}
function selectCustomer(tempcustomerId: number) {
  customerId.value = tempcustomerId
  hasCustomerStatus.value = true
  const tempcustomer = getCustomer(tempcustomerId)
  customer.value = tempcustomer || {}
  showSignDialog.value = false
}
function getCustomer(customerId: number) {
  const customer = customerLists.value.find((obj) => obj.dbid === customerId)
  return customer
}
watch(paramValue, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`)
  if (newValue != null && newValue != '') {
    searchStatus.value = true
  } else {
    searchStatus.value = false
  }
})
</script>
<template>
  <van-nav-bar title="车主认证" left-text="返回" left-arrow @click-left="onClickLeft" />

  <div class="recommendCustomerContent">
    <div class="recommendCustomerHeadr">
      <div class="recommendCustomerTitle">姓名：{{ member.name || 无 }}</div>
      <div class="recommendCustomerTitle">联系电话：{{ member.mobilePhone }}</div>
    </div>
    <div class="recommendCustomerInnerItem" @click="detailTo(member.dbid)">
      <div class="recommendCustomerInnerItemImg">
        <img :src="VUE_APP_BASE_API + '/images/vue/recommendCar.png'" width="100" />
      </div>
      <div class="recommendCustomerInnerItemContent">
        <van-cell-group class="contentItemValue">
          <van-cell title="关注时间" :value="member.createTime" />
          <van-cell
            title="注册时间"
            :value="member.memAuthDate || '无'"
            ellipsis
            class="van-cell"
          />
          <van-cell
            title="车主认证状态"
            :value="member.carMasterStatusName || '无'"
            ellipsis
            class="van-cell"
          />
          <van-cell
            v-if="member.carMasterStatus == 2"
            title="认证时间"
            :value="member.carMasterDate || '无'"
            ellipsis
            class="van-cell"
          />
        </van-cell-group>
      </div>
    </div>
  </div>
  <div class="recommendCustomerContent">
    <div class="recommendCustomerHeadr">
      <div class="recommendCustomerTitle">车主信息</div>
    </div>
    <div class="recommendCustomerInnerItem" style="cursor: pointer" @click="selectCustomerDialog">
      <div class="recommendCustomerInnerItemContent" style="display: flex; flex: 5">
        <van-cell-group style="width: 100%" class="contentItemValue">
          <van-cell title="姓名" :value="customer.name || '无'" />
          <van-cell
            title="联系电话"
            :value="customer.mobilePhone || '无'"
            ellipsis
            class="van-cell"
          />
          <van-cell title="车架号" :value="customer.vinCode || '无'" ellipsis class="van-cell" />
          <van-cell
            title="成交时间"
            :value="customer.successDate || '无'"
            ellipsis
            class="van-cell"
          />
        </van-cell-group>
      </div>
      <div class="memberAuthRight">
        <van-icon
          name="arrow"
          style="font-size: 30px; text-align: right; color: var(--sub-two-color)"
        ></van-icon>
      </div>
    </div>
  </div>
  <div class="mainContent">
    <div style="position: fixed; left: 0; bottom: 0; width: 100%; padding: 12px">
      <van-button
        type="primary"
        style="width: 100%"
        :disabled="hasCustomerStatus == false"
        @click="saveCarMasterAuth"
        >保存车主认证</van-button
      >
    </div>
  </div>
  <van-popup v-model:show="showSignDialog" position="bottom" round :style="{ height: '80%' }">
    <div style="margin-top: 20px">
      <van-search
        v-model="paramValue"
        show-action
        placeholder="请输入客户姓名或电话"
        @search="onSearch"
        update:model-value="searchChanage"
      >
        <template #action>
          <div
            @click="onClickButton"
            disabled
            class=""
            :style="
              searchStatus == true ? 'color: var(--main-color)' : 'color: var(--sub-two-color)'
            "
          >
            搜索
          </div>
        </template>
      </van-search>
      <van-empty
        v-if="noEmpty == true"
        :image="VUE_APP_BASE_API + '/images/vue/noData.png'"
        image-size="100"
        description="暂无客户信息"
      />
      <van-list v-else>
        <div
          class="recommendCustomerContent itemshodow"
          v-for="customer in customerLists"
          v-bind:key="customer.dbid"
          @click="selectCustomer(customer.dbid)"
          style="border-shadow: 0 0 4px rgba(0, 0, 0, 0.1)"
        >
          <van-radio-group v-model="customerId">
            <div class="recommendCustomerHeadr">
              <div class="recommendCustomerTitle">{{ customer.name }}</div>
              <div class="recommendCustomerTitle">{{ customer.mobilePhone || '无' }}</div>
            </div>
            <div class="recommendCustomerInnerItem" style="cursor: pointer">
              <div
                class="recommendCustomerInnerItemContent"
                style="display: flex; flex: 5"
                @click="selectCustomer"
              >
                <van-cell-group style="width: 100%" class="contentItemValue">
                  <van-cell
                    title="车型"
                    :value="customer.carModelStr || '无'"
                    ellipsis
                    class="van-cell"
                  />
                  <van-cell
                    title="车架号"
                    :value="customer.vinCode || '无'"
                    ellipsis
                    class="van-cell"
                  />
                  <van-cell
                    title="成交时间"
                    :value="customer.successDate || '无'"
                    ellipsis
                    class="van-cell"
                  />
                </van-cell-group>
              </div>
              <div class="memberAuthRight">
                <van-radio :name="customer.dbid" checked-color="var(--main-color)"></van-radio>
              </div>
            </div>
          </van-radio-group>
        </div>
        <br />
      </van-list>
      <div class="carMasterSelectButtonContainer">
        <van-button type="primary" style="width: 100%" @click="closeSelectDialog"
          >取消选择</van-button
        >
      </div>
    </div>
  </van-popup>
  <br />
</template>
